<template>
	<view :class="[`${PREFIX}`]">
		<view :class="[`${PREFIX}-head`]">
			<view :class="[`${PREFIX}-head-input`]">
				

			</view>
			<view :class="[`${PREFIX}-head-tab`]">
				<view v-for="item in tabList"
					:class="[`${PREFIX}-head-tab-item`, tabActive === item.id ? `${PREFIX}-head-tab-active`: '']"
					:key="item.id" @click="tabClick(item)">
					<view :class="[`${PREFIX}-head-tab-item-inner`]">
						{{ item.name }}
						<view v-if="tabActive === item.id" :class="[`${PREFIX}-head-tab-item-inner-line`]"></view>
						<view :class="[`${PREFIX}-head-tab-item-inner-dot`]"></view>
					</view>
				</view>

			</view>
		</view>
		<view :class="[`${PREFIX}-main`]">
			<!-- 没有数据 -->
			<NoData v-if="tabActive===0" />
			<Card v-if="tabActive!==0" @toDetail="toDetail" />
		</view>
	</view>
</template>

<script>
	const PREFIX = 'home'
	import NoData from './components/NoData.vue'
	import Card from './components/Card.vue'
	export default {
		data() {
			return {
				PREFIX,
				tabActive: 0,
				tabList: [{
						name: '关注',
						id: 0
					},
					{
						name: '最新',
						id: 1
					},
					{
						name: '推荐',
						id: 2
					}
				],
				value: ''
			}
		},
		components: {
			NoData,
			Card
		},
		onLoad() {

		},
		methods: {
			tabClick(val) {
				this.tabActive = val.id
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/home/detail'
				})
			}
		}
	}
</script>
<style lang="less">
	page,
	.home {
		background: #F4F2F2;
		width: 100%;
		height: 100%;
	}

	.home {

		display: flex;
		flex-direction: column;

		&-head {
			background: #fff;

			&-input {
				display: flex;
				align-items: center;

				&-input {
					display: block;
					width: 50%;
					border: 1rpx solid red;
					border-radius: 30rpx;
					background: red;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					background: blue;
				}
			}

			&-tab {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #999;
				padding: 32rpx 100rpx;
				box-sizing: border-box;

				&-item {
					flex: 1;
					text-align: center;

					&-inner {
						width: auto;
						display: inline-block;
						position: relative;

						&-line {
							width: 100%;
							height: 4rpx;
							background: #7355FF;
							position: absolute;
							left: 0;
							bottom: -32rpx;
						}

						&-dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background: #E02020;
							position: absolute;
							top: 0;
							right: -8rpx;
						}
					}
				}

				&-active {
					color: #7355FF;
				}
			}
		}

		&-main {
			flex: 1;
			margin-top: 10rpx;
			overflow-y: scroll;
		}
	}
</style>